<template>
  <el-container>
    <el-header class="banner">
      供应商火热招募中
    </el-header>
    <el-main class="yy">
      <el-form :model="formData" ref="recruitmentForm" label-width="120px" @submit.native.prevent="onSubmit">
        <el-form-item label="公司名称*" prop="supplier_name">
          <el-input v-model="formData.supplierName" placeholder="请输入公司名称"></el-input>
        </el-form-item>
        <el-form-item label="营业执照编号" prop="supplier_card">
          <el-input v-model="formData.supplierCard" placeholder="请输入营业执照编号"></el-input>
        </el-form-item>
        <el-form-item label="营业执照图片" prop="merchant_card">
          <el-upload class="avatar-uploader" 
          action="http://localhost:8989/buy/customer/avatarImgUpload" 
          :show-file-list="false"
          :on-success="handleAvatarSuccess" 
          :before-upload="beforeAvatarUpload">
          <img v-if="supplierImage" :src="supplierImage" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </el-form-item>
        <el-form-item label="公司地址*" prop="address">
          <div class="block">
            <span class="demonstration">默认显示所有Tag</span>
            <el-cascader v-model="selectedOptions" :options="options" :props="props" clearable></el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="详细地址" prop="detail_address">
          <el-input v-model="formData.detailsAddr" placeholder="请输入详细地址"></el-input>
          <el-form-item__content>
          </el-form-item__content>
        </el-form-item>
        <el-form-item label="法定人姓名" prop="supplier_person">
          <el-input v-model="formData.supplierPerson" placeholder="请输入法定人姓名"></el-input>
          <el-form-item__content>
          </el-form-item__content>
        </el-form-item>
        <el-form-item label="联系电话" prop="supplier_number">
          <el-input v-model="formData.supplierNumber" placeholder="请输入联系电话"></el-input>
          <el-form-item__content>
          </el-form-item__content>
        </el-form-item>
        <el-form-item label="帐户余额" prop="balance">
          <el-input v-model="formData.balance" placeholder="请输入余额"></el-input>
          <el-form-item__content>
          </el-form-item__content>
        </el-form-item>
        <el-form-item label="申请时间" prop="create_date">
          <div class="block">
            <el-date-picker v-model="formData.createDate" type="datetime" placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button type="text">报名电话：400-888-9997</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      supplierImage:'',
      pickerOptions: {},
      formData: {},
      props: {
        value: 'value',
        label: 'label',
        children: 'children',
      },
      options: [{
        value: 1,
        label: '东南',
        children: [{
          value: 2,
          label: '湖南',
          children: [
            { value: 3, label: '长沙' },
            { value: 4, label: '株洲' },
            { value: 5, label: '湘潭' }
          ]
        }, {
          value: 7,
          label: '江苏',
          children: [
            { value: 8, label: '南京' },
            { value: 9, label: '苏州' },
            { value: 10, label: '无锡' }
          ]
        }, {
          value: 12,
          label: '浙江',
          children: [
            { value: 13, label: '杭州' },
            { value: 14, label: '宁波' },
            { value: 15, label: '嘉兴' }
          ]
        }]
      }, {
        value: 17,
        label: '西北',
        children: [{
          value: 18,
          label: '陕西',
          children: [
            { value: 19, label: '西安' },
            { value: 20, label: '延安' }
          ]
        }, {
          value: 21,
          label: '新疆维吾尔族自治区',
          children: [
            { value: 22, label: '乌鲁木齐' },
            { value: 23, label: '克拉玛依' }
          ]
        }]
      }],
      value: '',

    };
  },
  methods: {
    async onSubmit() {
      // 假设你想要以字符串形式打印出完整的地址  
      let address = this.getAddressLabels(this.selectedOptions, this.options);
      this.formData.address = address;
      console.log(this.formData);
      const res = await this.$http.post(`/buy/supplier/insertSupplier`, this.formData);
      if (res!=null) {
        this.$message.success("成功！！！")
      }
      console.log(res)
    },
    getAddressLabels(selected, options, path = []) {
      if (!selected.length) {
        return path.join('-'); // 如果没有更多选择的地址，返回完整的路径  
      }

      let currentOption = options.find(option => option.value === selected[0]);
      if (!currentOption) {
        return '';
      }

      path.push(currentOption.label); // 将当前级别的地址添加到路径上  

      // 如果还有更多选择的地址，递归查找剩余部分的地址  
      if (selected.length > 1 && currentOption.children) {
        const remainingSelected = selected.slice(1); // 移除已经找到的这一级  
        return this.getAddressLabels(remainingSelected, currentOption.children, path); // 递归调用，并传递当前的路径  
      }

      return path.join('-'); // 返回完整的路径  
    },
    selectLocation() {
      // 定位门店的逻辑  
      console.log('门店定位功能');
    },
    //头像成功上传的回调
  handleAvatarSuccess(res, file) {
  console.log(res)
  this.supplierImage = res;
  // this.userInfo.avatarImg = this.imageUrl
},
//上传之前的校验
beforeAvatarUpload(file) {
  const isJPG = file.type === 'image/jpeg';
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG) {
    this.$message.error('上传头像图片只能是 JPG 格式!');
  }
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB!');
  }
  return isJPG && isLt2M;
    },
  },
};
</script>

<style scoped>
.banner {
  /* 红色 */
  /* 标题颜色 */
  color: #fff;
  /* 白色 */
  /* 标题文本居中 */
  text-align: center;
  /* 标题高度 */
  height: 50px;
  /* 标题行高，与高度相同实现垂直居中 */
  line-height: 50px;
  /* 标题字体大小 */
  font-size: 20px;
  /* 标题字体加粗 */
  font-weight: bold;
  /* 添加阴影效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 标题的padding */
  padding: 0 10px;
  /* 标题的margin（如果需要的话） */
  margin-bottom: 20px;
}

.custom-form {
  /* 自定义表单样式 */
  margin: 20px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.custom-form .el-form-item__label {
  /* 自定义标签样式 */
  color: #333;
  font-weight: bold;
}

.disabled-input {
  /* 自定义禁用的 input 样式 */
  background-color: #f5f7fa;
  cursor: not-allowed;
}

.custom-btn {
  /* 自定义按钮样式 */
  margin-left: 10px;
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.custom-btn:hover {
  /* 自定义按钮点击时的样式 */
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .banner {
  background-image: url('@/assets/imgs/main/image4.png'); 
  background-repeat: no-repeat;  
  background-size: cover;  
  }
  .yy {
  background-image: url('@/assets/imgs/main/image5.png'); 
  background-repeat: no-repeat;  
  background-size: cover;  
  }
</style>